<template>
  <div class="upload-list" :style="{'width': listWidth}" :class="{'upload-alone': alone}">
    <div v-for="(file) in items" :key="file.id" :style="{'width': uploadListSonDivWidth, height: uploadListSonDivheight}">
      <div class="left file-img" :style="{'width': fileImgWidth, height: fileImgHeight}">
        <img v-if="file.fileType === 1" :src="file.blob || file.src" :width="imgWidth" :height="imgHeight"/>
        <div v-else :style="{background: file.bgColor}" class='fileType'>{{file.fileIcon}}</div>
        <div v-if="!file.success" class="file-progress" :style="{width: file.progress + '%'}"></div>
      </div>
      <div class="left file-p" v-if="showPictureInfo">
        <p class="file-name">{{file.fileName || file.name}}</p>
        <p v-if="file.success && !file.edit" class="success">上传成功</p>
        <p v-if="file.error" class="error" @click.prevent="reUpload(file)">重新上传</p>
        <p class="file-remove" @click.prevent="remove(file)">删除文件</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'zz-upload-list',
    data () {
      return {
        items: []
      }
    },
    props: {
      listWidth: {
        type: String,
        default: '500px'
      },
      files: {
        type: Array
      },
      alone: {
        type: Boolean,
        default: false
      },
      showPictureInfo: {
        type: Boolean,
        default: true
      },
      imgWidth: {
        type: String,
        default: '50px'
      },
      imgHeight: {
        type: String,
        default: 'auto'
      },
      fileImgWidth: {
        type: String,
        default: '50px'
      },
      fileImgHeight: {
        type: String,
        default: '50px'
      },
      uploadListSonDivWidth: {
        type: String,
        default: '174px'
      },
      uploadListSonDivheight: {
        type: String,
        default: '52px'
      }
    },
    watch: {
      files (files) {
        this.items = files
      }
    },
    mounted () {
      this.items = this.files
    },
    methods: {
      remove (file) {
        this.items = this.items.filter(item => item.id !== file.id)
        this.$fileUpload.cancelUpload(file)
      },
      reUpload (file) {
        this.$fileUpload.resetUpload(file)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .upload-list{
    >div {
      display: inline-block;
      vertical-align: top;
      margin-top: 5px;
      .file-img{
        margin-right: 5px;
        border: 1px $color-line solid;
        text-align:center;
        position: relative;
        overflow: hidden;
        .file-progress{
          width: 0;
          height: 50px;
          position: absolute;
          top:0;
          left:0;
          background: rgba(0, 0, 0, 0.5);
        }
        .fileType{
          width: 50px;
          text-align: center;
          line-height: 50px;
          height: 100%;
          color: #fff;
        }
        span{
          display:table-cell;
          vertical-align:middle;
          line-height: 1px;
        }
      }
      .file-p{
        font-size: 12px;
        margin-top:2px;
        p{
          width: 110px;
          line-height: 15px;
          margin-top: 2px;
          margin-bottom: 0;
          @include ellipsis;
          &:first-child {
            margin-top: 0;
          }
        }
        .file-name{
          height: 17px;
          line-height: 17px;
        }
        .success{
          color: $color-grid;
        }
        .error{
          color: $color-grid;
          cursor: pointer;
        }
        .file-remove{
          cursor: pointer;
          color: $color;
          &:hover{
            color: $color-hover;
          }
        }
      }
    }
  }
  .upload-alone{
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
